<template>
  <div>
    <div class="center">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-select v-model="form.province" placeholder="请选择省" size="small" @change="cityFn">
            <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="form.city" placeholder="请选择市" size="small" @change="areaFn">
            <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="form.area" placeholder="请选择区" size="small">
            <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="4"><el-input v-model="form.real_name" placeholder="请输入姓名" size="small"></el-input></el-col>
        <el-col :span="4"><el-input v-model="form.account" placeholder="请输入帐号" size="small"></el-input></el-col>
        <el-col :span="4"><el-button type="primary" size="small" @click="searchFn()">搜索</el-button></el-col>
      </el-row>
      <div class="table">
        <simple-table :tableConfig="tableConfig" :tableData="tableData" @operation="goToOperation"></simple-table>
      </div>
      <el-row :gutter="24" class="fr">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next" :total="total"> </el-pagination>
      </el-row>
    </div>
    <el-dialog title="详情" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div v-for="item in dialogList" :key="item.id">
        <el-button type="text" @click="checkReport(item)">{{item.title}}</el-button>
      </div>
    </el-dialog>
    <el-dialog title="下载" :visible.sync="dialogVisible2" width="30%" :before-close="handleClose">
      <div v-for="item in downloadList" :key="item.id">
        <el-button type="text" @click="downloadListFn(item.id)">{{item.title}}</el-button>
      </div>
    </el-dialog>
    <el-dialog title="作答记录详情" :visible.sync="dialogVisible3" width="30%" :before-close="handleClose">
      <div v-for="item in answerList" :key="item.id">
        <el-button type="text" @click="answerListFn(item)">{{item.title}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import downloadApi from '@/common/downloadApi.js'
import homeTab from '@/components/table2.vue'
import simpleTable from '@/components/table.vue'
import {APIGETPERSONALREPORT, APIGETDOWNLOADREPORTPATH, APISCHOOLWHOLEREGION} from '@/common/api.js'
export default {
  components: {homeTab, simpleTable},
  data () {
    return {
      api: '',
      tableData: [],
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        selection: true,
        border: true,
        config: [
          {name: '序号', type: 'index', width: '60px'},
          {id: 'plan_title', name: '测评计划名称'},
          {id: 'title', name: '组合或量表名称'},
          {id: 'school_title', name: '学校名称'},
          {id: 'province_title', name: '省份'},
          {id: 'city_title', name: '城市'},
          {id: 'area_title', name: '区/县'},
          {id: 't_id', name: '账号'},
          {id: 'real_name', name: '姓名'},
          {id: 'sex', name: '性别'},
          {id: 'section_title', name: '学段'},
          {id: 'grade_title', name: '年级'},
          {id: 'create_time', name: '报告生成时间'},
          {id: 'start_time', name: '测评开始时间'},
          {id: 'end_time', name: '测评结束时间'},
          {id: 'class_title', name: '班级'},
          {id: 'operation', name: '操作', list: []}
        ]
      },
      currentPage: 1,
      total: 0,
      page: 1,
      form: {
        account: '',
        real_name: '',
        area: '',
        city: '',
        province: ''
      },
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogList: [],
      downloadList: [],
      answerList: [],
      report_id: Number,
      hrefStr: '',
      menuList: [],
      provinceOptions: [],
      cityOptions: [],
      areaOptions: []
    }
  },
  created () {
    this.getWholeRegion()
    this.tableList()
    this.Api = downloadApi
    this.menuList = sessionStorage.getItem('list')
    if (this.menuList.includes('singleReport')) {
      var operation1 = {id: 'details', name: '详情'}
      this.tableConfig.config.forEach(item => {
        if (item.id === 'operation') {
          item.list.push(operation1)
        }
      })
    }
    if (this.menuList.includes('singleReport')) {
      var operation2 = {id: 'download', name: '下载'}
      this.tableConfig.config.forEach(item => {
        if (item.id === 'operation') {
          item.list.push(operation2)
        }
      })
    }
    if (this.menuList.includes('scaleAnswer')) {
      var operation3 = {id: 'answer', name: '作答情况'}
      this.tableConfig.config.forEach(item => {
        if (item.id === 'operation') {
          item.list.push(operation3)
        }
      })
    }
  },
  methods: {
    getWholeRegion () {
      APISCHOOLWHOLEREGION().then((res) => {
        this.provinceOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    cityFn () {
      this.form.city = ''
      this.form.area = ''
      APISCHOOLWHOLEREGION({
        parent_id: this.form.province
      }).then((res) => {
        this.cityOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    areaFn () {
      this.form.area = ''
      APISCHOOLWHOLEREGION({
        parent_id: this.form.city
      }).then((res) => {
        this.areaOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    tableList () { // 表格
      this.form.page = this.page
      APIGETPERSONALREPORT(this.form).then((res) => {
        if (res.status === 1) {
          if (res.data !== null) {
            this.total = res.data.totalNumber
            this.currentPage = res.data.page
            this.tableData = res.data.list
          } else {
            this.tableData = []
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    searchFn () {
      this.tableList()
    },
    goToOperation (val) { // 按钮
      if (val.id === 'download') {
        this.downloadFn(val)
      } else if (val.id === 'details') {
        this.detailsFn(val)
      } else if (val.id === 'answer') {
        this.answerFn(val)
      }
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    },
    downloadFn (val) {
      this.dialogVisible2 = true
      this.downloadList = val.rows.sub_list
      this.report_id = val.rows.report_id
    },
    downloadListFn (id) {
      APIGETDOWNLOADREPORTPATH({
        report_id: this.report_id,
        sid: id
      }).then((res) => {
        if (res.status === 1) {
          window.location.href = this.Api + res.data.url + '?report_info=' + res.data.report_info
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    answerListFn (val) {
      this.$router.push({path: '/answer', query: {uid: val.uid, sid: val.sid, report_id: val.report_id, title: val.title}})
    },
    answerFn (val) {
      console.log(val)
      this.dialogVisible3 = true
      this.answerList = val.rows.scale_list
      this.answerList.forEach(item => {
        item.sid = item.id
        item.uid = val.rows.uid
        item.report_id = val.rows.report_id
      })
      console.log(this.answerList)
    },
    detailsFn (val) { // 平台推荐=>1 自建=>2 单个量表=>3
      this.dialogVisible = true
      this.dialogList = val.rows.sub_list
      if (val.rows.plan_type === 3 || val.rows.plan_type === 2) {
        this.dialogList.forEach(item => {
          if (item.id === 925984) { // 六大兴趣
            item.hrefStr = '/api/report/sixInterest'
          } else if (item.id === 181731) { // 职业价值观
            item.hrefStr = '/api/report/professionalValue'
          } else if (item.id === 132462) { // MBTI
            item.hrefStr = '/api/report/MBTICharacter'
          } else if (item.id === 329235) { // 九大智能高中版
            item.hrefStr = '/api/report/nineSmart'
          } else if (item.id === 689942) { // 九大智能初中版
            item.hrefStr = '/api/report/nineSmart'
          } else if (item.id === 867971) { // 中学生问题解决能力量表
            item.hrefStr = '/api/report/problemSolving'
          } else if (item.id === 756492) { // 中学生沟通能力量表
            item.hrefStr = '/api/report/communicationSkills'
          } else if (item.id === 976297) { // 学生人际合作能力评估报告
            item.hrefStr = '/api/report/InterpersonalCooperation'
          } else { // 单个量表
            item.hrefStr = '/api/report/getIndividualReportView'
          }
          item.report_id = val.rows.report_id
          item.token = window.sessionStorage.getItem('token')
        })
      } else if (val.rows.plan_type === 1) {
        this.dialogList.forEach(item => {
          item.hrefStr = '/api/report/getRecommendIndividualReportView'
          item.report_id = val.rows.report_id
          item.token = window.sessionStorage.getItem('token')
        })
      }
    },
    handleClose (done) {
      done()
    },
    checkReport (row) {
      window.open(row.hrefStr + '?report_id=' + row.report_id + '&sid=' + row.id + '&token=' + row.token)
      this.dialogVisible = false
    }
  }
}
</script>
